<template>
  <div class="tour">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="客运旅游" name="first">
        <div class="tours">
          <div class="tour_items">
            <img
              src="../assets/images/tour1.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c201644427880112ae'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游” 高品质旅游版专线列车</p>
              <span>¥ 2560</span>
            </div>
          </div>
          <div class="tour_items">
            <img
              src="../assets/images/tour2.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c20164457aed6012db'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游” 陇上江南·行摄山></p>
              <span>¥ 560</span>
            </div>
          </div>
          <div class="tour_items">
            <img
              src="../assets/images/tour3.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016445b0fd5f1304'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游”华夏寻根·人文始祖天水两</p>
              <span>¥ 2560</span>
            </div>
          </div>
          <div class="tour_items">
            <img
              src="../assets/images/tour4.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446996d9813a9'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游”精品旅游线路</p>
              <span>¥ 3380</span>
            </div>
          </div>
          <div class="tour_items">
            <img
              src="../assets/images/tour5.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c201644684cc7c1388'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游”美丽甘南三日游</p>
              <span>¥ 880</span>
            </div>
          </div>
          <div class="tour_items">
            <img
              src="../assets/images/tour6.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游” 青海湖、茶卡2日>游</p>
              <span>¥ 880</span>
            </div>
          </div>
          <div class="tour_items">
            <img
              src="../assets/images/tour7.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446ba8bc313cd'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游”嘉敦5日游</p>
              <span>¥ 2260</span>
            </div>
          </div>
          <div class="tour_items">
            <img
              src="../assets/images/tour8.jpg"
              @click="
                jump(
                  'https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446d31e1113e5'
                )
              "
            /><br />
            <div class="dash">
              <p>“环西部火车游” 敦煌一地三日游</p>
              <span>¥ 1380</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    jump(url) {
      window.location.href = url
    }
  }
}
</script>

<style scoped lang="scss">
.tour {
  width: 1200px;
  margin-left: 20%;
  padding-top: 20px;
}
.tours {
  width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .tour_items {
    width: 25%;
    display: flex;
    flex-direction: column;
    img {
      width: 288px;
      height: 180px;
    }

    .dash {
      border: 1px solid #dedede;
      height: 80px;
      width: 95.5%;
      margin-top: -17px;
      margin-bottom: 20px;
      p {
        font-size: 14px;
        padding: 10px 5px;
      }
      span {
        font-size: 20px;
        padding: 0px 15px;
        color: #ff842a;
      }
    }
  }
}
</style>